/**
 * Created by bethinner on 5/17/16.
 */
import React, { Component } from 'react';

import {bindActionCreators} from 'redux'
import { connect } from 'react-redux'
import Link from 'react-router/lib/Link'
import browserHistory from 'react-router/lib/browserHistory'
import NavigationBar from '../components/NavigationBar'
import BottomButton from '../components/BottomButton'
import TitleWithContent from '../components/TitleWithContent'
import * as actions from '../actions/actions.js'
class CardDetailContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            card_id: this.props.location.state.cardID
            , nowCount: 0
        };
        this.props.valueCardDetailFetch(this.props.location.state.cardID);
    }



    goBuy() {

        //return;
        browserHistory.push({
                pathname: '/SubmitOrderContainer',
                state: {
                    data: this.props.valueCardDetail,
                    card_id: this.state.card_id
                }
            }
            //`/SubmitOrderContainer?data=${JSON.stringify(this.props.valueCardDetail)}
            //&&card_id=${JSON.stringify(this.state.card_id)}`
        );
    }

    goStoreList() {

        $('#loadingToast').show();
        browserHistory.push({
                pathname: '/storeList',
                state: {
                    business_id: this.props.valueCardDetail.business_id
                }
            }
        );
    }

    render() {

        var effectiveStartTime = this.props.valueCardDetail.effective_start_time + "";
        if (effectiveStartTime == "undefined")
            effectiveStartTime = "          ";
        var effectiveEndTime = this.props.valueCardDetail.effective_end_time + "";
        if (effectiveEndTime == "undefined")
            effectiveEndTime = "          ";

        var stock = 0;


        if (this.props.valueCardDetail.stock) {
            stock = this.props.valueCardDetail.stock;
        }

        return (
            <div style={{backgroundColor:"white"}}>
                <NavigationBar Title="卡券详情" LeftBar="true"/>

                <div style={{marginBottom:"50px"}}>
                    <div style={{position:"relative"}}>
                        <img src={this.props.valueCardDetail.pic_url}
                             style={{width:"100%",height:"200px"}}
                        />

                        <div style={{
                    position:"absolute",
                    right:"0px",
                    bottom:"10px",
                    fontSize:"18px",
                    textAlign:"center",
                    color:"white",
                    marginLeft:"6px",
                    backgroundImage:"url('/public/img/remain_number.png') "
                    }}>
                            <span style={{margin: "10px"}}>仅剩{this.props.valueCardDetail.stock}份</span>
                        </div>
                    </div>
                    <div style={{fontSize:"20px",
                    textAlign:"center"}}>
                        {this.props.valueCardDetail.card_name}
                    </div>
                    <a className="weui_cell">
                        <div>
                    <span style={{fontSize:"24px",
                                color:"red"}}>
                       ¥ {this.props.valueCardDetail.purchase_price}元
                    </span>
                    <span style={{fontSize:"14px",
                                marginLeft:"18px",
                                textDecoration:"line-through",
                                color:"#9B9B9B"}}>
                        原价¥{this.props.valueCardDetail.orignal_price}
                    </span>
                        </div>
                    </a>
                    <a className="weui_cell" style={titleDivStyle}>
                        <div className="weui_cell_bd weui_cell_primary">
                            <p> 有效期: {effectiveStartTime.substring(0, 10)} / {effectiveEndTime.substring(0, 10)}
                            </p>
                        </div>
                    </a>
                    <a className="weui_cell weui_cells_access" style={titleDivStyle}>
                        <div className="weui_cell_bd weui_cell_primary">
                            <p>适用门店</p>
                        </div>
                        <div className="weui_cell_ft" onClick={this.goStoreList.bind(this)}>查看适用门店</div>
                    </a>
                    <TitleWithContent title="活动内容:"
                                      content={this.props.valueCardDetail.card_rule}
                    />

                </div>

                <BottomButton text="立即抢购" isBuy={stock} btnClick={this.goBuy.bind(this)}/>
            </div>

        )
    }

}
function mapStateToProps(state) {
    $('#loadingToast').hide();
    return {
        valueCardDetail: state.get('valueCardDetail').toJS(),
    }


}
function mapDispatchToProps(dispatch) {
    return bindActionCreators(actions, dispatch);
}
let titleDivStyle = {
    fontSize:'17px',
    color:"#666"
}

CardDetailContainer.defaultProps = {}

CardDetailContainer.propTypes = {}

module.exports = connect(mapStateToProps, mapDispatchToProps)(CardDetailContainer);

